<template>
    <div class="buy-popup">
        <van-overlay @click.self="close" :show="overlayShow" style="z-index:199">
            <transition name="van-slide-up" mode="out-in">
                <div v-if="show" class="diy-popup" :style="{height:height}">
                    <h2>{{info.title}}</h2>
                    <div class="cover" ref="coverImg">
                        <img :src="info.coverImg" alt="">
                    </div>
                    <h3> {{info.price}} يۈەن</h3>
                    <div class="buy-btn" @click="order">سېتىۋېلىش</div>
                </div>
            </transition>
        </van-overlay>
    </div>
</template>

<script>
import { $orderNumber } from "@/utils";
import { Toast } from 'vant'
export default {
    props: {
        height: {
            type: String,
            default: '0%'
        },
        show: {
            type: Boolean,
            default: false
        },
        info: {
            type: Object,
            default: () => { }
        }
    },
    watch: {
        show(val) {
            this.overlayShow = val;
        }
    },
    data() {
        return {
            overlayShow: false
        }
    },
    methods: {
        close() {
            this.$emit('close', false)
        },
        order() {
            let orderId = $orderNumber(),
                payAmount = Math.round(this.info.price * 100);
            let opt = {
                orderId,
                openId: this.$store.state.userInfo.openid,
                payAmount,
                uid: this.$store.state.userInfo.uid
            };
            this.$http
                .post("/getPaymentInfo", {
                    payInfo: this.$encrypt(JSON.stringify(opt))
                })
                .then(res => {
                    let info = JSON.parse(this.$decrypt(res));
                    let { nonceStr, paySign, signType, timeStamp } = info;
                    let setOption = this.$encrypt(
                        JSON.stringify({
                            ...opt,
                            vid: this.info.vid,
                            payInfo: JSON.stringify(info)
                        })
                    );
                    this.$http
                        .post("/setBuyVideo", { payInfo: setOption })
                        .then(payResult => {
                            Toast({
                                message: 'مۇۋەپپەقىيەتلىك سېتىۋالدىڭىز',
                                duration: 1000
                            });
                            this.$emit('update')
                        }).catch(err => {
                            Toast({
                                message: 'مەغلۇپ بولدى، بىز بىلەن ئالاقىلىشىڭ',
                                duration: 1000
                            })
                        })
                })
        }
    }
}
</script>

<style lang="scss" scoped>
.buy-popup {
    .diy-popup {
        border-radius: 40px 40px 0 0;
        background: rgba(255, 255, 255, 0.95);
        position: fixed;
        z-index: 200;
        bottom: 0;
        right: 0;
        width: 100%;
        // transition: all 0.75s linear;
        .cover {
            padding: 10px 30px;
            height: 40%;
            img {
                width: 100%;
                height: 100%;
                border-radius: 20px;
                transition: all 0.75s linear;
            }
        }
        h2 {
            margin-top: 40px;
        }
        h3 {
            direction: rtl;
        }
        .buy-btn {
            width: 60%;
            padding: 10px 60px;
            background-color: #19a046;
            border-radius: 30px;
            margin: 0 auto;
            color: #ffffff;
            font-size: 30px;
        }
    }
    /deep/.van-overlay {
        z-index: 140 !important;
    }
}
</style>